<template>
    <div class="tab">
        <div class="tabtop">
            <el-radio-group v-model="radio" size="large" @change="change">
                <el-radio-button label="0">待付款</el-radio-button>
                <el-radio-button label="1">待审核</el-radio-button>
                <el-radio-button label="2">未通过</el-radio-button>
                <el-radio-button label="3">待上传</el-radio-button>
                <el-radio-button label="4">已完成</el-radio-button>
                <el-radio-button label="5">已取消</el-radio-button>

            </el-radio-group>
        </div>

        <div class="tabtop">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="expand">
                    <template #default="props">
                        <el-table :data="props.row.order_goods">

                            <el-table-column prop="goods_name" label="名称">
                                <template #default="prop">
                                    <el-image style="width: 100px; height: 100px" :src="prop.row.goods_image" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="goods_name" label="名称" />
                            <el-table-column prop="goods_area" label="面积" />

                            <el-table-column prop="goods_num" label="数量" />
                            <el-table-column prop="goods_price" label="价格" />

                        </el-table>
                    </template>

                </el-table-column>
                <el-table-column prop="sn" label="编号" />
                <el-table-column prop="goods_area" label="面积" />
                <el-table-column prop="goods_price" label="价格" />
                <el-table-column fixed="right" label="操作" width="200">
                    <template #default="props">
                        <el-button v-if="props.row.status == 0 || props.row.status == 1" @click="handleClick(props.row)"
                            link size="small">取消订单</el-button>
                        <el-button v-if="props.row.status == 0 || props.row.status == 2" link size="small"
                            @click="onsub(props.row)">{{ props.row.status == 0 ? '立即付款' : '重新提交' }}</el-button>

                            <el-button @click="changeorderre(props.row)"
                            link size="small"  v-if="props.row.status == 3 ">确认收货</el-button>

                            
                    </template>
                </el-table-column>

            </el-table>

            <div class="xmt40">
                <el-pagination small background @current-change="handleSizeChange" v-model:current-page="currentPage"
                    layout="prev, pager, next" :total="total" class="mt-4" />
            </div>

            <el-drawer v-model="drawer" :direction="direction" :before-close="handleClose">
                <!-- <span>提交</span> -->
                <el-form :model="form" label-width="auto" style="max-width: 600px">
                    <el-form-item label="付款时间" v-if="onshow">
                        <el-date-picker v-model="upload.name" type="datetime" value-format="YYYY-MM-DD hh:MM:ss"
                            placeholder="Pick a day" />
                    </el-form-item>

                    <el-form-item label="上传凭证">
                        <el-upload class="avatar-uploader" action="https://test.fsyt.cc/api/common/upload"
                            :show-file-list="false" :headers="headerObj" :on-success="handleAvatarSuccess">
                            <img v-if="upload.img" :src="upload.img" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>


                    <span style="display: flex;align-items: flex-end;justify-content: flex-end">
                        <el-button @click="drawer = false">取消</el-button>
                        <el-button type="primary" @click="getorderpay()">提交</el-button>
                    </span>

                </el-form>

            </el-drawer>


        </div>


        <el-dialog v-model="outerVisible" title="删除" width="800">

            <el-input v-model="upload.name" style="width: 100%" :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="取消说明" type="textarea" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="outerVisible = false">取消</el-button>
                    <el-button type="primary" @click="getclone()">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { orderlists, getCancelOrder, orderpay ,orderupload} from '../../api/goods.js'
import { useUser } from '../../store/user';
const user = useUser()
let radio = ref(0)
const tableData = ref([])
let total = ref(0)

let currentPage = ref(1)

let drawer = ref(false)

let outerVisible = ref(false)

let headerObj = ref({
    token: user.userinfo.token
})

const handleAvatarSuccess = (
    response,
    uploadFile
) => {
    upload.img = response.data.fullurl
    console.log(response, uploadFile);
}


const getorderpay = () => {
   if(onshow.value){
    getpay()
   }else{
    getorderreceipt()
   }
}



const getpay = () =>{
    console.log({
        id: upload.id,
        paytime: upload.name,
        payimage: upload.img
    });
    orderpay({
        id: upload.id,
        paytime: upload.name,
        payimage: upload.img
    }, user.userinfo.token).then(res => {
        if (res.data.code == 0) return
        drawer.value = false
        upload.id = '',
            upload.name = '',
            upload.img = ''
        getorderlists()
    })
}


const handleSizeChange = (val) => {
    currentPage.value = val.id
    getorderlists()

}

const handleClick = (data) => {
    upload.id = data.id
    outerVisible.value = true

}

const getclone = () => {
    getCancelOrder({ id: upload.id, reason: upload.name }, user.userinfo.token).then(res => {
        outerVisible.value = false
        upload.id = '',
            upload.name = '',
            upload.img = ''
        getorderlists()
    })
   
}

const getsub = () =>{
    
}

const onsub = (data) => {
    onshow.value = true
    upload.id = data.id
    drawer.value = true
}
// 确认收货

let onshow = ref(true)


const getorderreceipt = () => {
    orderupload({
        id: upload.id,
        uploadimage: upload.img
    }, user.userinfo.token).then(res => {
        if (res.data.code == 0) return
        getorderlists()
    })
}

const changeorderre = (data) => {
    onshow.value = false
    upload.id = data.id
    drawer.value = true
}



let upload = reactive({
    id: '',
    name: '',
    img: ''
})

const change = (val) => {
    currentPage.value = 1
    radio.value = val
    getorderlists()
}

const getorderlists = () => {
    var { token } = user.userinfo
    console.log(token);
    orderlists({
        page_no: currentPage.value,
        page_size: 10,
        status: radio.value
    }, token).then(res => {
        console.log(res)

        total.value = res.data.data.count

        tableData.value = res.data.data.lists
    })
}



getorderlists()
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.tab {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */
    height: calc(100vh - .9063rem);

    padding: 60px
}

.tabtop {
    width: 100%;
    padding: 40px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px
}

.xmt40 {
    margin-top: 40px;
}
</style>